var contextPath = window.location.pathname.substring(0, window.location.pathname.indexOf("/", 1));
// $.ajax({
//     url: contextPath + '/loadReserServlet',
//     method: 'POST',
//     success: function(data) {
//         console.log(data);  // 查看返回的 JSON 数据
//
//         // 清空当前预约列表
//         $('#reservation-list').empty();
//
//         // 遍历返回的数据，并动态生成 HTML 内容
//         data.forEach(function(reservation) {
//             // 创建一个新的预约项
//             var appointmentItem = $('<div class="appointment-item"></div>');
//
//             // 预约顶部信息
//             var appointmentTop = $('<div class="appointment-top"></div>');
//             appointmentTop.append('<span>预约号 ' + reservation.id + '</span>');
//             appointmentTop.append('<span> 预约时间：' + reservation.service_date +'&nbsp;'+reservation.service_period +'</span>');
//             var statusBox = $('<div class="status-box"></div>');
//             statusBox.append('<span>预约状态</span>');
//             statusBox.append('<span class="status-tag">' + reservation.state + '</span>');
//             appointmentTop.append(statusBox);
//
//             // 服务信息
//             var serviceBox = $('<div class="service-box"></div>');
//             serviceBox.append('<div class="service-img" style="background-image: url(' + reservation.serviceImage + ')"></div>');
//             serviceBox.append('<span>' + reservation.serviceName + '</span>');
//
//             // 操作按钮
//             var actionBox = $('<div class="action-box"></div>');
//             // 订单状态完成或者取消后，不可能再取消
//             if(!(reservation.state==="已完成"||reservation.state==="已取消"))
//             {
//                 actionBox.append(`<button class="cancel-btn btn" value="${reservation.id}">取消</button>`);
//             }
//
//             actionBox.append('<a href="#" class="detail-link">详情</a>');
//             // 将所有信息添加到新的预约卡片中
//             appointmentItem.append(appointmentTop);
//             appointmentItem.append(serviceBox);
//             appointmentItem.append(actionBox);
//
//             // 将新的预约卡片添加到页面中的预约列表
//             $('#reservation-list').append(appointmentItem);
//         });
//         $('#numTotal').text(data.length);
//     }
// });
function loadReservationData() {
    $.ajax({
        url: contextPath + '/loadReserServlet',
        method: 'POST',
        success: function (data) {
            console.log(data);  // 查看返回的 JSON 数据

            // 清空当前预约列表
            $('#reservation-list').empty();

            // 遍历返回的数据，并动态生成 HTML 内容
            data.forEach(function (reservation) {
                // 创建一个新的预约项
                var appointmentItem = $('<div class="appointment-item"></div>');

                // 预约顶部信息
                var appointmentTop = $('<div class="appointment-top"></div>');
                appointmentTop.append('<span>预约号 ' + reservation.id + '</span>');
                appointmentTop.append('<span> 预约时间：' + reservation.service_date +'&nbsp;'+ reservation.service_period + '</span>');
                var statusBox = $('<div class="status-box"></div>');
                statusBox.append('<span>预约状态</span>');
                statusBox.append('<span class="status-tag">' + reservation.state + '</span>');
                appointmentTop.append(statusBox);

                // 服务信息
                var serviceBox = $('<div class="service-box"></div>');
                serviceBox.append('<div class="service-img" style="background-image: url(' + reservation.serviceImage + ')"></div>');
                serviceBox.append('<span>' + reservation.serviceName + '</span>');

                // 操作按钮
                var actionBox = $('<div class="action-box"></div>');
                // 订单状态完成或者取消后，不可能再取消
                if (!(reservation.state === "已完成" || reservation.state === "已取消")) {
                    actionBox.append(`<button class="cancel-btn btn" value="${reservation.id}">取消</button>`);
                }

                actionBox.append(`<a href="xiangmu.jsp?id=${reservation.service_id}" class="detail-link">详情</a>`);
                // 将所有信息添加到新的预约卡片中
                appointmentItem.append(appointmentTop);
                appointmentItem.append(serviceBox);
                appointmentItem.append(actionBox);

                // 将新的预约卡片添加到页面中的预约列表
                $('#reservation-list').append(appointmentItem);
            });
            $('#numTotal').text(data.length);
        }
    });
}

loadReservationData();
var reservationId
$(function (){
    $(document).on('click', '.btn', function() {
       reservationId = $(this).val();
    });
    $('.yes').click(function (){
        $('.modal').hide();
        $.ajax({
            url:contextPath+'/ReservationServlet',
            type:'POST',
            data:{
                id:reservationId,
                action:'canceled'
            },
            success:function (data,status){
                if (status === 'success') {
                    alert("取消成功");
                    loadReservationData();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                if (jqXHR.status === 400) {
                    alert("请求参数有误：" + jqXHR.responseText);
                } else if (jqXHR.status === 500) {
                    alert("服务器内部错误：" + jqXHR.responseText);
                }
            }
        })
    })
})




